<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
body{
    background-color: #070b16;
}
.box1{
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: #070b16;
}
#title{
    position: absolute;
    top: 0;
    left: 3%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
}
#tib1{
    background-color: #0f3450;
    position: absolute;
    top: 10%;
    left: 30%;
    width: 180px;
    height: 50px;
}
#tib2{
    background-color: #0f3450;
    position: absolute;
    top: 10%;
    left: 45%;
    width: 180px;
    height: 50px;
}
#tib3{
    background-color: #0f3450;
    position: absolute;
    top: 10%;
    left: 60%;
    width: 180px;
    height: 50px;
}
.box1 h1{
    position: absolute;
    top: 10%;
    left: 80%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
}
#btext1{
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 10px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #4e7b9a;
}
#btext2{
    position: absolute;
    top: 3%;
    left: 65%;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
}
.xian1{
    position: absolute;
    top: 80px;
    width: 100%;
    height: 1px;
    background-color: #2f94ca;
}
#xian2{
    position: absolute;
    left: 9%;
    top: 50px;
    width: 85%;
    height: 1px;
    background-color: #ffffff;
}
#xian3{
    position: absolute;
    left: 9%;
    top: 320px;
    width: 85%;
    height: 2px;
    background-color: #ffffff;
}
#xian4{
    position: absolute;
    left: 9%;
    top: 45px;
    width: 85%;
    height: 2px;
    background-color: #ffffff;   
}
#xian5{
    position: absolute;
    left: 9%;
    top: 480px;
    width: 85%;
    height: 2px;
    background-color: #ffffff;   
}
#xian6{
    position: absolute;
    left: 3%;
    top: 40px;
    width: 190px;
    height: 2px;
    background-color: #ffffff;   
}
#xian7{
    position: absolute;
    left: 50%;
    top: 40px;
    width: 190px;
    height: 2px;
    background-color: #ffffff;   
}
#xian9{
    position: absolute;
    left: 9%;
    top: 420px;
    width: 85%;
    height: 2px;
    background-color: #ffffff;  
}

.box2{
    position: absolute;
    top: 81px;
    width: 100%;
    height: 420px;
}
.zuo2{
    position: absolute;
    left: 0;
    width: 25%;
    height: 650px;
    background: #2d2e30;
}
#zuotext{
    color: #638ebb;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    position: absolute;
    left: 10%;
    top: 1%;
}
#zuotext4{
    color: #638ebb;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    position: absolute;
    left: 10%;
    top: 43%;
}
#clt{
    position: absolute;
    top: 70px;
    left: 15%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#clt2{
    position: absolute;
    top: 70px;
    left: 40%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#clt3{
    position: absolute;
    top: 70px;
    left: 65%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#clt4{
    position: absolute;
    top: 180px;
    left: 15%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#clt5{
    position: absolute;
    top: 180px;
    left: 40%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#clt6{
    position: absolute;
    top: 180px;
    left: 65%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #2f94ca;
}
#z1t{
    position: absolute;
    top: 350px;
    left: 7%;
    width: 330px;
    height: 240px;
}
#zuotext2{
    position: absolute;
    top: 0%;
    left: 27%;
    color: #638ebb;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 800;
}
#zuotext3{
    position: absolute;
    top: 100%;
    left: 0%;
    width: 80px;
    color: #ffffff;
    font-size: 10px;
    font-family: Microsoft YaHei;
    font-weight: 500;
}
.zhong2{
    position: absolute;
    left: 25%;
    width: 50%;
    height: 380px;
    background-color: #040b15;
}
#ztu{
    position: absolute;
    left: 10%;
    height: 400px;
    width: 600px;
}
.you2{
    position: absolute;
    left: 75%;
    width: 25%;
    height: 641px;
    background: #2d2e30;
}
#youtext1{
    position: absolute;
    top: -3px;
    left: 10%;
    color: #638ebb;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 500;
}
#kongkuang{
    position: absolute;
    top: 12%;
    left: 12%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 5px solid #7aace7;
}
#kongkuang p{
    color: #7aace7;
}
#yongji{
    position: absolute;
    top: 12%;
    left: 40%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 5px solid #ad7173;
}
#yongji p{
    color: #ad7173;
}
#zhengchang{
    position: absolute;
    top: 12%;
    left: 68%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 5px solid #dfc28a;
}
#zhengchang p{
    color: #dfc28a;
}
#geshu{
    position: absolute;
    top: 2%;
    left: 23%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bolder;
}
#miaoshu{
    position: absolute;
    top: 45%;
    left: 33%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}
#jd{
    position: absolute;
    top: 15%;
    left: 7%;
    width: 160px;
    height: 27px;
    background-color: #f0efef;
}
#jd p{
    width: 50px;
    height: 26px;
    position: absolute;
    top: -12px;
    left: 5%;
}
#xx{
    position: absolute;
    top: 15%;
    left: 50%;
    width: 160px;
    height: 27px;
    background-color: #f0efef;
}
#xx p{
    width: 50px;
    height: 26px;
    position: absolute;
    top: -12px;
    left: 5%;
}
#youtext2{
    position: absolute;
    top: 67%;
    left: 10%;
    color: #638ebb;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 500;
}
.box3{
    position: absolute;
    top: 480px;
    left: 26%;
    width: 49%;
    height: 250px;
    background: #2d2e30;
}
table{
    position: absolute;
    top: 10%;
    left: 9%;
    width: 323px;
    border-collapse: collapse;
}
th,td{
    border: 1px solid #4e7999;
    text-align: center;
    padding: 15px 0;
}
table tbody tr:nth-child(odd){
    background-color: #3c6694;
}
table tbody tr:hover{
    background-color: #4e7999;
}
#zuo31{
    position: absolute;
    top: 0%;
    left: 3%;
    color: #638ebb;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 500;
}
#zuo32{
    position: absolute;
    top: 0%;
    left: 50%;
    color: #638ebb;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 500;
}

#zi{
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 800;
    color: #ffffff;
}
#tu31{
    position: absolute;
    left: 3%;
    top: 20%;
    width: 300px;
    height: 190px;
}
#tu32{
    position: absolute;
    left: 50%;
    top: 20%;
    width: 300px;
    height: 190px;
}
#youtext21{
    position: absolute;
    top: 370px;
    left: 10%;
    color: #638ebb;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 500; 
}
#youtext22{
    color: #ffffff;
    font-size: 13px;
    position: absolute;
    top: 67%;
    left: 10%;
    width: 320px;
}
#youtext23{
    color: #ffffff;
    font-size: 13px;
    position: absolute;
    top: 79%;
    left: 10%;
    width: 320px;
}
</style>

    <div class="box1">
        <p id="title">游客喜好分析</p>
        <div id="tib1">
            <p id="btext1">本平台购票人数</p>
            <p id="btext2">500</p>
        </div>
        <div id="tib2">
            <p id="btext1">本平台精品团人数</p>
            <p id="btext2">98</p>
        </div>
        <div id="tib3">
         <p id="btext1">本平台散团人数</p>
         <p id="btext2">288</p>
        </div>
        <h1></h1>
    </div>
    <div class="xian1"></div>
    <div class="box2">
        <div class="zuo2">
            <p id="zuotext">游客喜好程度（10分制）</p>
            <div id="xian2"></div>
            <div id="clt">
                <p id="zuotext2">8.2</p>
                <p id="zuotext3">兵马俑一号坑</p>
            </div>
            <div id="clt2">
                <p id="zuotext2">7.8</p>
                <p id="zuotext3">兵马俑二号坑</p>
            </div>
            <div id="clt3">
                <p id="zuotext2">8.5</p>
                <p id="zuotext3">兵马俑三号坑</p>
            </div>
            <div id="clt4">
                <p id="zuotext2">6.4</p>
                <p id="zuotext3">铜车马博物馆</p>
            </div>
            <div id="clt5">
                <p id="zuotext2">8.9</p>
                <p id="zuotext3">k0006陪葬坑</p>
            </div>
            <div id="clt6">
                <p id="zuotext2">9.1</p>
                <p id="zuotext3">k9901陪葬坑</p>
            </div>
        
            <p id="zuotext4">分点游览情况</p>
            <div id="xian3"></div>
            <img id="z1t" src="./img/index-img/z1t.png">
        </div>
        <div class="zhong2">
            <img id="ztu" src="./img/index-img/4.jpg">
        </div>
        <div class="you2">
            <p id="youtext1">平均停留时长</p>
            <div id="xian4"></div>
            <table>
               <tbody>
                   <tr><th id="zi">兵马俑一号坑</th> <th id="zi">1.71</th>  </tr>
                   <tr><th id="zi">兵马俑二号坑</th>  <th id="zi">1.82</th> </tr>
                   <tr><th id="zi">兵马俑二号坑 </th>  <th id="zi">1.72</th> </tr>
                   <tr><th id="zi"> 铜车马博物馆</th>  <th id="zi">2.34</th> </tr>
                   <tr><th id="zi">k0006陪葬坑</th> <th id="zi">2.08</th>  </tr>
                   <tr><th id="zi"> k9901陪葬坑</th> <th id="zi">2.21</th>  </tr>
               </tbody>
            </table>
            <p id="youtext21">景区规划建议</p>
            <div id="xian9"></div>
            <p id="youtext22">兵马俑二号坑游客停留平均时间最长，可以考虑扩大兵马俑二号坑文物遗址的影响范围，以此为中心辐射带动整个景区各景点发展。</p>
            <p id="youtext23">兵马俑一号坑游客停留平均时间最短，可以考虑加大对兵马俑一号坑的宣传力度，进一步增设对兵马俑一号坑的引导标志，吸引更多游客，并提升该景点的服务质量。</p>
        </div>
    </div>
    <div class="box3">
        <p id="zuo31">游客喜好变化趋势(按天)</p>
        <div id="xian6"></div>
        <img id="tu31" src="./img/index-img/31.png">
        <p id="zuo32">游客喜好变化趋势（按月）</p>
        <div id="xian7"></div>
        <img id="tu32" src="./img/index-img/32.png">
    </div>
<script>
var nums1 = [501, 501, 502,502,503,504,504,504,504,505,506,506,506,507,507,507,508,509,509,509,510,511,512,512,512,513,514,514,514,515,515,516,517
    ,517,518,518,519,519,520,520,520,520,521,521,522,522,523,524,524];
var nums2 = [99,100,100,101,101,102,103,104,104,104,104,105,106,106,107,107,108,109,109,110,110,111,112,112,113,114,114,115,116,116,117,117,118,119,119,120,120,121,122,123,123,123,124,125,125,126,126,127]
var nums3 = [290,290,291,291,292,292,293,293,294,295,295,295,296,297,298,298,298,299,300,300,301,302,302,303,304,304,305,305,306,307,307,308,308,308,309,309,309,310,310,310,310,311,312,312,312]

var i=0
var j=0
var k=0
let h1=document.querySelector('h1')
setInterval(function(){
            let date = new Date()
            let a=date.getMonth()+1
        let b=date.getHours()
        let c=date.getMinutes()
        let d = date.getSeconds()
        h1.innerHTML=date.getFullYear()+'-'+a+'-'+date.getDate()+' '+b+':'+c+':'+d
        },1000)
        let a=setInterval(function(){
  name1=nums1[i]
  btext2[0].innerHTML=name1
  i++
  if(i>=47){
    clearInterval(a)
}
},1000)

let b=setInterval(function(){
  name2=nums2[j]
  btext2[1].innerHTML=name2
  j++
  if(j>=46){
    clearInterval(b)
}
},1000)
let c=setInterval(function(){
  name3=nums3[j]
  btext2[2].innerHTML=name3
  k++
  if(k>=44){
    clearInterval(c)
}
},1000)

</script>
</body>
</html>